import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';

type MenuItem = Required<MenuProps>['items'][number];

/* 【方式一】 */
// function getItem(
//     label: React.ReactNode,
//     key: React.Key,
//     icon?: React.ReactNode,
//     children?: MenuItem[],
// ): MenuItem {
//     return {
//         key,
//         icon,
//         children,
//         label,
//     } as MenuItem;
// }
// const items: MenuItem[] = [
//     getItem('Option 1', '/page1', <PieChartOutlined />),
//     getItem('Option 2', '/page2', <DesktopOutlined />),
//     getItem('User', 'sub1', <UserOutlined />, [
//         getItem('Tom', '3'),
//         getItem('Bill', '4'),
//         getItem('Alex', '5'),
//     ]),
//     getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
//     getItem('Files', '9', <FileOutlined />),
// ];

/* 【方式二】 */
const items: MenuItem[] = [
    { label: '栏目一', key: '/page1', icon: <PieChartOutlined /> },
    { label: '栏目二', key: '/page2', icon: <PieChartOutlined /> },
    {
        label: '栏目三',
        key: 'about',
        icon: <PieChartOutlined />,
        children: [
            { label: '栏目三-about', key: '/about/page1', icon: <PieChartOutlined /> },
            { label: '栏目三-2', key: '/about/2', icon: <PieChartOutlined /> },
            { label: '栏目三-3', key: '/about/3', icon: <PieChartOutlined /> }
        ]
    },
    {
        label: '栏目四',
        key: 'page4',
        icon: <PieChartOutlined />,
        children: [
            { label: '栏目四-1', key: '/page1/1', icon: <PieChartOutlined /> },
            { label: '栏目四-2', key: '/page1/2', icon: <PieChartOutlined /> },
            { label: '栏目四-3', key: '/page1/3', icon: <PieChartOutlined /> }
        ]
    },
    { label: '栏目五', key: 'sub2', icon: <PieChartOutlined /> }
]



const menuComp: React.FC = () => {
    const navigateTo = useNavigate()
    const currentRoute = useLocation()
    console.log('currentRoute', currentRoute.pathname);


    const menuClick = (e: { key: string }) => {
        console.log('点击菜单', e.key);
        // 跳转路径
        navigateTo(e.key)
    }

    /**
     * 实现点击有下拉选项的菜单栏，刷新页面后，还保留在那一项并展开
     */
    let firstOpenKey: string = "";
    const findKey = (obj: { key: string }) => obj.key === currentRoute.pathname
    items.map(el => {
        if (el!['children']?.find(findKey)) firstOpenKey = el?.key as string
    })

    const [openKeys, setOpenKeys] = useState([firstOpenKey])  // 设置展开项初始值
    const handleOpenChange = (keys: string[]) => {   // 展开收起侧边栏触发。参数为当前展开或收起那一项
        setOpenKeys([keys[keys.length - 1]])  // 修改展开项。只有点击的展开
    }

    return (
        <Menu
            theme="dark"
            // 初始化菜单项。实现刷新页面后还保持处于当前模块并高亮
            defaultSelectedKeys={[currentRoute.pathname]}
            mode="inline"
            items={items}
            onClick={menuClick}
            // 监听侧边栏展开收起。
            onOpenChange={handleOpenChange}
            // 当前菜单展开项的key数组
            openKeys={openKeys}
        />
    )
};

export default menuComp;